<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-26 10:09:04
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-29 14:58:29
 * @FilePath: \shangyitong\src\pages\user\patient\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 就诊人组件的静态结构 -->
	<el-card>
		<template #header>
			<div class="card-header">
				<span>就诊人管理</span>
				<el-button size="small" type="primary" @click="addUserFn"
					><el-icon><Avatar /></el-icon>添加就诊人</el-button
				>
			</div>
		</template>
		<!-- 就诊人组件 -->
		<div class="patient" v-show="scene == 0">
			<Visitor
				v-for="(item, index) in visitorArr"
				:key="item.id"
				class="item"
				:visitor="item"
				:index="index"
				:isDeleteBtn="true"
				@changScene="changScene"
                @remove = "remove"
			></Visitor>
		</div>
		<!-- 添加或者修改已有就诊人信息的结构 -->
		<div class="userInfo" v-show="scene == 1">
			<el-divider content-position="left">就诊人信息</el-divider>
			<div class="fromContain">
				<el-form ref="form"  label-width="80px">
					<el-form-item label="用户姓名">
						<el-input
							v-model="userInfo.name"
							placeholder="用户姓名"
						></el-input>
					</el-form-item>
					<el-form-item label="证件类型" prop="certificatesType">
						<el-select
							v-model="userInfo.certificatesType"
							placeholder="选择证件类型"
						>
							<el-option
								v-for="item in certificationTypeOption"
								:key="item.id"
								:label="item.name"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码">
						<el-input
							v-model="userInfo.certificatesNo"
							placeholder="证件号码"
						></el-input>
					</el-form-item>
					<el-form-item label="用户性别">
						<el-radio-group v-model="userInfo.sex">
							<el-radio :value=0 size="large">女</el-radio>
							<el-radio :value=1 size="large">男</el-radio>
						</el-radio-group>
					</el-form-item> 
					<el-form-item label="出生日期">
						<el-date-picker
							v-model="userInfo.birthdate"
							type="date"
							placeholder="出生日期"
                            value-format="YYYY-MM-DD"
							size="small"
						/>
					</el-form-item>
					<el-form-item label="手机号码">
						<el-input
							v-model="userInfo.phone"
							placeholder=""
						></el-input>
					</el-form-item>
				</el-form>
			</div>

			<el-divider content-position="left">建档信息(完善后部分医院首次就诊不排队建档)</el-divider>
			<div class="fromContain">
				<el-form ref="form"  label-width="80px">
					<el-form-item label="婚姻状况">
						<el-radio-group v-model="userInfo.isMarry">
							<el-radio :value=0  size="large">未婚</el-radio>
							<el-radio :value=1  size="large">已婚</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="自费/医保">
						<el-radio-group v-model="userInfo.isInsure">
							<el-radio :value=0  size="large">自费</el-radio>
							<el-radio :value=1  size="large">医保</el-radio>
						</el-radio-group>
					</el-form-item>
                    <el-form-item label="当前住址" prop="certificatesType">
                        <el-cascader  :props="props" v-model="userInfo.addressSelected"/>
					</el-form-item>
                    <el-form-item label="详细地址">
						<el-input
							v-model="userInfo.address"
							placeholder="详细地址"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
            <el-divider content-position="left">联系人信息(选填)</el-divider>
            <div class="fromContain">
				<el-form ref="form" label-width="80px">
					<el-form-item label="用户姓名">
						<el-input
							v-model="userInfo.contactsName"
							placeholder="用户姓名"
						></el-input>
					</el-form-item>
					<el-form-item label="证件类型" prop="certificatesType">
						<el-select
							v-model="userInfo.contactsCertificatesType"
							placeholder="选择证件类型"
						>
							<el-option
								v-for="item in certificationTypeOption"
								:key="item.id"
								:label="item.name"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码">
						<el-input
							v-model="userInfo.contactsCertificatesNo"
							placeholder="证件号码"
						></el-input>
					</el-form-item>
					<el-form-item label="手机号码">
						<el-input
							v-model="userInfo.contactsPhone"
							placeholder="手机号码"
						></el-input>
					</el-form-item>
                    <el-form-item label="">
                        <el-button :plain="true" @click="reset">重写</el-button>
                        <el-button type="primary" @click="submitEvent">提交</el-button>
                    </el-form-item>
				</el-form>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted,watch } from 'vue'
import { reqGetUser} from '@/api/hospital/index'
import {reqCertificationType,reqCityData,reqAddORUpdatePatient,reqRemove} from '@/api/user/index'
import type { VisitorArr, VisitorResponseData ,} from '@/api/hospital/type'
import type {
	CertificationTypeResoponse,
	CertifiCationArr,
    CityDataResponse,
    CityDataArr,
    Partient,
} from '@/api/user/type'
import { ElMessage, type CascaderProps } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
let $route = useRoute();
let $router = useRouter()
let scene = ref<number>(0) //0 就诊人信息卡片页面 1.就诊人信息页面
//获取全部就诊人信息列表数组
let visitorArr = ref<VisitorArr>([])
//获取城市数据
let cityDataArr = ref<CityDataArr>([])
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node:any, resolve) {
    let parentId = node.data.id|| "86"
    let result:CityDataResponse = await reqCityData(parentId)
    cityDataArr.value=result.data
    //整理数据
      const nodes = cityDataArr.value.map((item:any) => ({
        id:item.id,
        value: item.value,
        label: item.name,
        leaf:!item.hasChildren

      }))
    //   // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
      resolve(nodes)
  },
}
//手机新增就诊人信息
let userInfo = reactive({
	id: "",
    name: "",    
    certificatesType: "",//证件类型
    certificatesNo: "",//证件号码
    sex: 0,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,//医保1 自费 0
    addressSelected:[],//住址
    address: "",//详细地址 
    contactsName: "",//联系人名字
    contactsCertificatesNo: "",//联系人证件类号码
    contactsCertificatesType: "", // 联系人证件类型
    contactsPhone: "",//联系人电话号码    
})
let certificationTypeOption = ref<CertifiCationArr>([])
onMounted(async() => {
	//获取就诊人信息里列表数组
	fetchUserData()
    //获取证件类型的方法 
    getCertificationType();
    getCitydata()
    //判断:当前这个路由组件是不是从预约挂号组件而来:[是从预约挂号组件而来,路径上携带query参数type=add]
    if($route.query.type=='add'){
        scene.value = 1
    }
    if($route.query.type=='edit'){
        scene.value = 1
    }    
})
//监听所有就诊人员信息数据
watch(()=>visitorArr.value,(newValue)=>{
    if(newValue&&$route.query.type=='edit')  {
        let user  = newValue.find((item:any)=>{
        return item.id == $route.query.id        
    })
    Object.assign(userInfo,user)
    }
},{deep:true})
const fetchUserData = async () => {
	//获取就诊人信息:当前老师帐号下已经有四个就诊人信息
	//如果你是新的帐号,切记在已经写好的项目中,先注册几个就诊人信息
	let result: VisitorResponseData = await reqGetUser()
	if (result.code == 200) {
		visitorArr.value = result.data
	}
}
//获取证件类型的方法
const getCertificationType = async () => {
	let result: CertificationTypeResoponse = await reqCertificationType()
	if (result.code == 200) {
		// console.log("first",result)
		certificationTypeOption.value = result.data
	}
}
const  getCitydata = async()=>{
    let parentId = "86"
   let result:CityDataResponse = await reqCityData(parentId)
   if(result.code==200){
    cityDataArr.value = result.data
   }
}
//添加就诊人信息回调
const addUserFn = () => {
    //先清空上一次就诊人信息
    reset()
    scene.value = 1
}

//子组件自定义事件
const changScene = (visitor:Partient) => {
	scene.value = 1
    console.log("",visitor)
    Object.assign(userInfo,visitor)
}
//提交事件回调
const submitEvent = async()=>{
    try {
        let result = await  reqAddORUpdatePatient(userInfo)
    if(result.code==200){
        ElMessage({
            type:"success",
            message:`${userInfo.id?'修改':'添加'}就诊人成功`
        })
        //提交按钮时 判断 当前场景是否从预约挂号而来
        if($route.query.type){
            $router.back()
        }else{
            scene.value = 0
        }       
        fetchUserData()
    }
    } catch (error) {
        ElMessage({
            type:"error",
             message:`${userInfo.id?'修改':'添加'}就诊人失败`
        })
    }
  
}
//重写事件回调
const reset =()=>{
    //清空上一次添加就诊人信息
    Object.assign(userInfo,{
        id: "",
        name: "",    
        certificatesType: "",//证件类型
        certificatesNo: "",//证件号码
        sex: 0,
        birthdate: "",
        phone: "",
        isMarry: 0,
        isInsure: 0,//医保1 自费 0
        addressSelected:[],//住址
        address: "",//详细地址 
        contactsName: "",//联系人名字
        contactsCertificatesNo: "",//联系人证件类号码
        contactsCertificatesType: "", // 联系人证件类型
        contactsPhone: "",//联系人电话号码    
    })
}
//删除就诊人信息事件回调
const remove = async(data:any)=>{
    let result:any = await reqRemove(data.id)
    if(result.code==200){
        ElMessage({
            type:"success",
            message:"删除就诊人信息成功"
        })
        fetchUserData()
    }else{
        ElMessage({
            type:"error",
            message:"删除就诊人信息失败"
        })
    }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-card__header) {
	padding: 8px;
}
::v-deep(.el-card__body) {
	padding: 8px;
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.patient {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-radius: 15px;
	max-height: 760px;
	overflow: auto;
	cursor: pointer;
	.item {
		width: 32%;
		margin: 5px;
	}
}
.userInfo {
    max-width: none;
    max-height: 760px;
    overflow: auto;
	.fromContain {
		width: 60%;
		margin: 0 auto;
	}
}
</style>
